// 关于异步组件的HOC这块常常运用在路由，用来加载对应的页面，如：dva 的 dynami
import React from 'react';
import { useEffect, useState } from 'react';

const HOC = (Component:any) => (props:any) => {

  const [com, setCom] = useState<any>({})

  useEffect(() => {
    Component().then((cmp:any) => {
      setCom({ default: cmp.default})
    })
  }, [])

  if(com.default){
    const C = com.default
    return <C {...props} />
  }

  return  null
}
// setTimeout(())
const AsyncButton = HOC(() => import('../components/Button'))

const Index:React.FC<any> = () => {

  return (
    <div>
      <AsyncButton>异步按钮</AsyncButton>
    </div>
  );
}
export default Index